<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
	<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
	<script type="text/javascript"src="http://jquery-jsonp.googlecode.com/files/jquery.jsonp-1.1.0.min.js"></script>
	<script type="text/javascript"src="languages/english.js"></script>
	<script type="text/javascript"src="languages/settings_english.js"></script>
	<script type="text/javascript"src="languages/chinese.js"></script>
	<script type="text/javascript"src="languages/settings_chinese.js"></script>
	<script type="text/javascript"src="lib/shrimp7.js"></script>
	<link rel="stylesheet"type="text/css"href="css/webstyle.css"/>
	<link rel="stylesheet"type="text/css"href="css/flyout.css"/>
	<link rel="stylesheet"type="text/css"href="css/ui/jquery-ui-1.7.2.custom.css"/>
	<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
	<meta http-equiv="Pragma"content="no-cache"/>
	<title>shrimp7 web demo</title>
</head>
<body>
<h1>shrimp7 twitter/facebook JS lib, (alpha) - Rens Sparrius</h1>

<p>shrimp7 Twitter/Facebook JS lib is a library for easy communicating with social networks like Twitter and Facebook. This
lib is for Javascript developers who want to play with Twitter/Facebook connections in a different way. shrimp7 lib is build on the
principles of John Resig's jQuery.</p>

<p>This page is a demo page, the demo's on this page show you the features of the shrimp7 lib. The lib is still in alpha, but getting
more stable everyday. Don't hesistate to do a view source, everything is pure Javascript except our PHP proxy for Twitter and Facebook. These PHP files
are just a few lines to forward your POST requests.</p>

<p>shrimp7 js lib is licensed under <a href="lib/__LICENSE.txt">BSD license</a></p>

<p>To play or test the following demo's on your own website you only need the following code in the head of your HTML page:</p>

<pre>
	&lt;script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"&gt;&lt;/script&gt;
	&lt;script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"&gt;&lt;/script&gt;
	&lt;script type="text/javascript"src="http://www.soepgarnaal.com/shrimp7/web/lib/jquery/jquery.jsonp-1.1.0.min.js"&gt;&lt;/script&gt;
	&lt;script type="text/javascript"src="http://www.soepgarnaal.com/shrimp7/web/languages/english.js"&gt;&lt;/script&gt;
	&lt;script type="text/javascript"src="http://www.soepgarnaal.com/shrimp7/web/languages/settings_english.js"&gt;&lt;/script&gt;
	&lt;script type="text/javascript"src="http://www.soepgarnaal.com/shrimp7/web/lib/shrimp7.min.js"&gt;&lt;/script&gt;
</pre>

<h2>Demo 1 - Easy setup</h2>
<div id="twitterContent"style="float:right;width:200px;height:300px;overflow:auto;border-width:1px;border-color:#000;border-style:dotted;">

</div>

<input type="button" onclick="shrimp7.toggleScreen({id:'settings',type:'dialog',dropIn:'#flyout',title:'shrimp7 Settings',init:function(){shrimp7.settings.starter(null);},close:shrimp7.settings.close()})" value="Click for setup dialog and try to setup your Twitter"/>

<p>The code for the button:</p>

<pre>
shrimp7.toggleScreen({
	// 'id' is the id of the HTML element that will be pushed in to the screen
	id:'settings',
	// 'type' of the screen is dialog (in future can be flyout for Sidebar gadget, or anything else)
	type:'dialog',
	dropIn: '#flyout',
	// 'title' of the dialog window
	title:'shrimp7 Settings',
	// 'init' is function to init code for the settings screen
	init:function(){
		shrimp7.settings.starter(null);
	},
	// 'close' is function that will be fired on close
	close:shrimp7.settings.close()
});
</pre>

<h2>Demo 2 - Custom function after setup</h2>

<input type="button" onclick="shrimp7.toggleScreen({id:'settings',type:'dialog',title:'shrimp7 Settings',init:function(){shrimp7.settings.starter(null);shrimp7.settings.setupParams.twitterInit=function(){shrimp7.twitter.con.friendsTimeline({callback:function(data){alert('Latest tweet from your friend '+data[0].user.screen_name+': '+data[0].text);}});};},close:shrimp7.settings.close()})" value="Click for setup dialog and try to setup your Twitter"/>

<p>The code for demo 2</p>

<pre>
shrimp7.toggleScreen({
	// 'id' is the id of the HTML element that will be pushed in to the screen
	id:'settings',
	// 'type' of the screen is dialog (in future can be flyout for Sidebar gadget, or anything else)
	type:'dialog',
	// 'title' of the dialog window
	title:'shrimp7 Settings',
	// 'init' is function to init code, i use this function to change some things in the default.. only for the demo.
	init:function(){
		shrimp7.settings.starter(null);
		// Now a trick to alter the twitter init after succesful Twitter logon:
		shrimp7.settings.setupParams.twitterInit=function(){
			shrimp7.twitter.con.friendsTimeline(
				callback:function(data){
					alert('Latest tweet from your friend '+data[0].user.screen_name+': '+data[0].text);
				}
			);
		};
	},
	// 'close' is function that will be fired on close
	close:shrimp7.settings.close()
});
</pre>

<h2>Demo 3 - for this demo be sure you did the setup in Demo 1 or 2 succesful..</h2>

<input type="button" onclick="shrimp7.toggleScreen({id:'statusUpdate',type:'dialog',title:'shrimp7 status update',init:function(){shrimp7.statusUpdate.starter(null);},close:shrimp7.statusUpdate.close()})" value="Click to open statusUpdate dialog"/>

<p>The code for demo 3</p>

<pre>
shrimp7.toggleScreen({
	// 'id' is the id of the HTML element that will be pushed in to the screen
	id:'statusUpdate',
	// 'type' of the screen is dialog (in future can be flyout for Sidebar gadget, or anything else)
	type:'dialog',
	// 'title' of the dialog window
	title:'shrimp7 status update',
	// 'init' is function to init code, i use this function to change some things in the default.. only for the demo.
	init:function(){
		shrimp7.statusUpdate.starter(null);
	},
	// 'close' is function that will be fired on close
	close:shrimp7.statusUpdate.close()
});
</pre>

<h2>Demo 4 - another statusUpdate mash-up</h2>

<input type="text" id="demo4" value="I'm playing with shrimp7 JS lib for twitter and facebook!"/> <input type="button"onclick="shrimp7.twitter.con.newTweet({tweet:$('#demo4').val(),success:function(){alert('It is on twitter now!');}});"id="demo4post"value="Tweet!"/>

<pre>
shrimp7.twitter.con.newTweet({
	// here comes jQuery!
	tweet:$('#demo4').val(),
	success:function(){
		alert('It is on twitter now!');
	}
});
</pre>

<h2>Demo 5 - Fetch replies in dialog with paging.. shows simple chaining</h2>

<input type="button"onclick="demo5();"id="demo5"value="Click me to start.."/>

<div id="fetchReplies"style="display:none;">
	<div id="fetchRepliesContent">
		<div style="text-align:center;"><img src="images/icons/loading.gif"/></div>
	</div>
	<span class="twitterPagingPrevious"onclick=""><img src="images/icons/back.png"/></span>
	<span class="twitterPagingNext"onclick=""><img src="images/icons/forward.png"/></span>
</div>

<script>
function demo5(){
	shrimp7.twitter.fetchReplies({
		refresh:true,
		success:function(data){
			shrimp7.twitter.refreshTimelineData({
				startId:		0,
				saveStartIdent:	'timeline',
				totalPerPage:	3,
				dropIn:			'fetchRepliesContent',
				dom:			'document',
				data:			data,
				pagingPrefix:	'.twitterPaging'
			});
		},
		error:function(){
			$("#fetchRepliesContent").html('Something wrong, are you sure you did Demo 1 to setup Twitter?!');
		}
	}).
	toggleScreen({
		id:'fetchReplies',
		type:'dialog',
		title:'your replies'
	});
}
</script>

<pre>
	shrimp7.twitter.fetchReplies({
		refresh:true,
		success:function(data){
			shrimp7.twitter.refreshTimelineData({
				startId:		0,
				saveStartIdent:	'timeline',
				totalPerPage:	3,
				dropIn:			'fetchRepliesContent',
				dom:			'document',
				data:			data,
				pagingPrefix:	'.twitterPaging'
			});
		},
		error:function(){
			$("#fetchRepliesContent").html('Something wrong, are you sure you did Demo 1 to setup Twitter?!');
		}
	}).
	toggleScreen({
		id:'fetchReplies',
		type:'dialog',
		title:'your replies'
	});
</pre>

<h2>Demo 6 - Chaining little more..</h2>

<input type="button"onclick="demo6();"id="demo6"value="Click me to show chainability.."/>

<script>
function demo6(){
	alert('starting demo 5.. fetching some info from your Twitter, did you do the setup??');
	$("#demo6").val('loading..');
	shrimp7.
		twitter.
			fetchTimeline({
				refresh:true,
				success:function(data){
					$("#demo6").val('Click me to show chainability..');
					alert('Success! now using the refreshTimelineData function to fill a div with our data..');
					shrimp7.twitter.refreshTimelineData({
						startId:		0,
						saveStartIdent:	'timeline',
						totalPerPage:	15,
						dropIn:			'twitterContent',
						dom:			'document',
						data:			data,
						pagingPrefix:	'.twitterPaging'
					});
				},
				error:function(){
					alert('something went wrong with fetching Twitter timeline, maybe time to run the setup..');
					shrimp7.toggleScreen({
						id:'settings',
						type:'dialog',
						title:'shrimp7 Settings',
						init:function(){
							shrimp7.settings.starter(null);
						},
						onOpen:function(){
							alert('ok lets switch to Chinese..');
							shrimp7.settings.setLanguages('chinese');
							alert('and back to english');
							shrimp7.settings.setLanguages('english');
						},
						close:shrimp7.settings.close()
					}).
					// jump to the next page..
					settings.setupPage('selectServices');
				}
			}).
		twitter.con.
			getRateLimit(function(data){
				// Unfortunatly twitter has a rate limit.. this function in the con context
				// helps you to know your limit for this hour..
				alert('You can make '+data.remaining_hits+' twitter connections this hour.. that sucks! ;)');
			});
}
</script>

<pre>
	shrimp7.
		twitter.
			fetchTimeline({
				refresh:true,
				success:function(data){
					$("#demo5").val('Click me to show chainability..');
					alert('Success! now using the refreshTimelineData function to fill a div with our data..');
					shrimp7.twitter.refreshTimelineData({
						startId:		0,
						saveStartIdent:	'timeline',
						totalPerPage:	15,
						dropIn:			'twitterContent',
						dom:			'document',
						data:			data,
						pagingPrefix:	'.twitterPaging'
					});
				},
				error:function(){
					alert('something went wrong with fetching Twitter timeline, maybe time to run the setup..');
					shrimp7.toggleScreen({
						id:'settings',
						type:'dialog',
						title:'shrimp7 Settings',
						init:function(){
							shrimp7.settings.starter(null);
						},
						onOpen:function(){
							alert('ok lets switch to Chinese..');
							shrimp7.settings.setLanguages('chinese');
							alert('and back to english');
							shrimp7.settings.setLanguages('english');
						},
						close:shrimp7.settings.close()
					}).
					// jump to the next page..
					settings.setupPage('selectServices');
				}
			}).
		twitter.con.
			getRateLimit(function(data){
				// Unfortunatly twitter has a rate limit.. this function in the con context
				// helps you to know your limit for this hour..
				alert('You can make '+data.remaining_hits+' twitter connections this hour.. that sucks! ;)');
			});
</pre>

<h2>Demo 7 - Twitter search</h2>

<input type="button"onclick="demo7();"id="demo7"value="Click me to start demo 7"/>

<script>
function demo7(){
	shrimp7.twitter.search({
		query:'shrimp7',
		beforeSearch:function(){
			alert('This will be called before the actual search..');
		},
		success:function(data){
			alert('Found results: '+data.results.length);
		}
	})
}
</script>

<h2>Demo 8 - Twitter saved searches</h2>

<div id="searchesList"></div>

<input type="button"onclick="demo8();"id="demo8"value="Click me to start demo 8"/>

<script>
function demo8(){
	shrimp7.twitter.fetchSavedSearches({
		refresh:true,
		success:function(){
			shrimp7.twitter.savedSearchesList({
				dropIn:'#searchesList'
			})
		}
	});
}
</script>

	<div id="flyout">
		<div id="flyoutHeader"style="width:100%;">
			<div style="width:60%;float:left;"><h1 id="flyoutHeaderTitle"></h1></div>
			<div style="width:35%;float:right;text-align:right;"><img src="images/icons/close.png"alt="Close"id="flyoutClose"onclick=""style="cursor:pointer;"/></div>
			<div style="clear:both;"></div>
		</div>
		<div id="flyoutContent">
			<div style="text-align:center;"><img src="images/icons/loading.gif"alt="Loading"/></div>
		</div>
	</div>

<div id="screen"style="display:none;position:absolute;top:0px;left:0px;height:400px;width:300px;overflow:auto;">
	<div id="screenHeader"style="width:100%;">
		<div style="width:60%;float:left;"><h1 id="screenHeaderTitle"></h1></div>
		<div style="width:35%;float:right;text-align:right;"><img src="images/icons/close.png"alt="Close"id="screenClose"onclick=""style="cursor:pointer;"/></div>
		<div style="clear:both;"></div>
	</div>
	<div id="shrimp7screenContent">
		
		<!--
		Errors
		//-->
		
		<div id="errors"style="display:none;">
			<h1>Error</h1>
			<div id="errorMsg" style="margin-top:10px;width:100%;"></div>
			<div id="nextAction"></div>
		</div>
		
		<!--
		Settings
		//-->
		
		<div id="settings"style="display:none;">
			<div style="margin-top:10px;width:100%;">
				<div id="page_start"class="settingsPage">
					<div style="height:75px;"><p class="lngSettingsIntroduction">Welcome at the shrimp7 setup. Select a language and click next..</p></div>
					<fieldset class="page">
						<legend style="font-weight:bold;"><img src="images/icons/shrimp7_icon_16x16.png"alt=""style="vertical-align:middle;"/> shrimp7</legend>
						<div style="margin-top:10px;">
						<div style="width:50%;float:left;" class="lngSettingsLanguage">Language</div><div style="width:49%;float:left;"><select id="settingsLanguageSelector"onchange="shrimp7.settings.changeLanguage();"><option value="english">English</option><option value="chinese">中文</option></select> <img src="images/icons/earth.gif"alt=""style="width:16px;"/></div>
						</div>
					</fieldset>
				</div>
				<div id="page_selectServices"class="settingsPage">
					<div style="height:75px;">
						<p class="lngSettingsSelectServices">Please select the services you want to use:</p>
						<div id="error_selectServices"style="display:none;color:#ff0000;"></div>
					</div>
					<fieldset class="page">
						<legend style="font-weight:bold;"><img src="images/icons/shrimp7_icon_16x16.png"alt=""style="vertical-align:middle;"/> shrimp7</legend>
						<div style="margin-top:10px;">
							<div style="width:40%;float:left;"><img src="images/icons/facebook.png"alt=""style="vertical-align:middle;width:16px;"/> Facebook</div><div style="width:59%;float:left;"><input id="boolFacebook"type="checkbox"/> <a class="lngSettingsNoFacebookMember"href="http://www.facebook.com/signup"style="font-size:10px;">No Facebook member?</a></div>
							<div style="width:40%;float:left;"><img src="images/icons/twitter.png"alt=""style="vertical-align:middle;width:16px;"/> Twitter</div><div style="width:59%;float:left;"><input id="boolTwitter"type="checkbox"/> <a class="lngSettingsNoTwitterMember"href="https://twitter.com/signup"style="font-size:10px;">No Twitter member?</a></div>
						</div>
					</fieldset>
				</div>
				<div id="page_facebookCode"style="display:none;">
					<div style="height:75px;">
						<p class="lngSettingsFacebookOneTimeCodeIntro">For using Facebook you need a 'one-time-code', <a href="http://www.facebook.com/code_gen.php?v=1.0&amp;api_key=460e6842edb265d791b35f4a3c5a0b4d">click here</a> to get the free code. When you have the code, go back to the shrimp7 setup and fill in the code.</p>
						<div id="error_facebookCode"style="display:none;color:#ff0000;"></div>
					</div>
					<fieldset class="page">
						<legend style="font-weight:bold;"><img src="images/icons/facebook.png"alt=""style="vertical-align:middle;width:16px;"/> Facebook</legend>
						<div style="margin-top:10px;">
							<div style="width:50%;float:left;" class="lngSettingsOneTimeCode">One-time code</div><div style="width:49%;float:left;"><input type="text"id="txtToken"name="code"value=""size="6"maxlength="6"/><br>(<a class="lngSettingsFacebookGetTheCode"href="http://www.facebook.com/code_gen.php?v=1.0&amp;api_key=460e6842edb265d791b35f4a3c5a0b4d"target="_blank">Get the code</a>)</div>
						</div>
					</fieldset>
				</div>
				<div id="page_facebookCheckCode"style="display:none;">
					<div style="height:75px;"><p class="lngSettingsFacebookVerifyingCodeIntro">Verifying your Facebook one-time code, this could take a while..</span></p></div>
					<fieldset class="page">
						<legend style="font-weight:bold;"><img src="images/icons/facebook.png"alt=""style="vertical-align:middle;width:16px;"/> Facebook</legend>
						<div style="margin-top:10px;">
								<div style="width:40%;float:left;" class="lngSettingsOAuthPincode">Verifying code:</div><div id="verifyingFacebookPIN"style="width:49%;float:left;"></div>
						</div>
					</fieldset>
				</div>
				<div id="page_facebookSound"style="display:none;">
					<div style="height:75px;"><p class="lngSettingsFacebookEnableSoundIntro">Do you want to enable sound when there are new Facebook items?</p></div>
					<fieldset class="page">
						<legend style="font-weight:bold;"><img src="images/icons/facebook.png"alt=""style="vertical-align:middle;width:16px;"/> Facebook</legend>
						<div style="margin-top:10px;">
							<div style="width:50%;float:left;" class="lngSettingsEnableSound">Enable sound:</div><div style="width:49%;float:left;"><input id="boolFacebookSound"type="checkbox" /></div>
						</div>
					</fieldset>
				</div>
				<div id="page_twitterCode"style="display:none;">
					<div style="height:75px;">
						<p class="lngSettingsTwitterOneTimeCodeIntro">You need a Twitter one-time code to make contact with the Twitter services.</p>
						<span class="twitterGetCodeLinkInText"></span>
						<div id="error_twitterCode"style="display:none;color:#ff0000;"></div>
					</div>
					<fieldset class="page">
						<legend style="font-weight:bold;"><img src="images/icons/twitter.png"alt=""style="vertical-align:middle;width:16px;"/> Twitter</legend>
						<div style="margin-top:10px;">
								<div style="width:40%;float:left;" class="lngSettingsOneTimeCode">OAuth pincode:</div><div style="width:49%;float:left;"><input id="twitterPIN"type="text"style="width:150px;"/><br/><span class="twitterGetCodeLink"></span></div>
						</div>
					</fieldset>
				</div>
				<div id="page_twitterCheckCode"style="display:none;">
					<div style="height:75px;"><p class="lngSettingsTwitterVerifyingCodeIntro">Verifying your Twitter one-time code, this could take a while..</span></p></div>
					<fieldset class="page">
						<legend style="font-weight:bold;"><img src="images/icons/twitter.png"alt=""style="vertical-align:middle;width:16px;"/> Twitter</legend>
						<div style="margin-top:10px;">
								<div style="width:40%;float:left;" class="lngSettingsOAuthPincode">Verifying code:</div><div style="width:49%;float:left;"><span id="verifyingTwitterPIN"><img src="images/icons/loading_dots.gif"alt=""/></span></div>
						</div>
					</fieldset>
				</div>
				<div id="page_twitterSound"style="display:none;">
					<div style="height:75px;"><p class="lngSettingsTwitterEnableSoundIntro">Do you want to enable sound when there are new Tweets?</p></div>
					<fieldset class="page">
						<legend style="font-weight:bold;"><img src="images/icons/twitter.png"alt=""style="vertical-align:middle;width:16px;"/> Twitter</legend>
						<div style="margin-top:10px;">
							<div style="width:50%;float:left;" class="lngSettingsEnableSound">Enable sound:</div><div style="width:49%;float:left;"><input id="boolTwitterSound"type="checkbox"/></div>
						</div>
					</fieldset>
				</div>
				<div id="page_twitterDeveloper"style="display:none;">
					<div style="height:75px;"><p class="lngSettingsTwitterAddDeveloperIntro">Do you want to add the shrimp7 developer to your following list and get updates about shrimp7?</p></div>
					<fieldset class="page">
						<legend style="font-weight:bold;"><img src="images/icons/twitter.png"alt=""style="vertical-align:middle;width:16px;"/> Twitter</legend>
						<div style="margin-top:10px;">
							<div style="width:50%;float:left;" class="lngSettingsTwitterFollowDeveloper">Follow developer:</div><div style="width:49%;float:left;"><input id="boolTwitterDeveloper"type="checkbox"/></div>
						</div>
					</fieldset>
				</div>
				<div id="page_twitterTest"style="display:none;">
					<div style="height:75px;"><p class="lngSettingsTwitterSendTestTweetIntro">Do you want to send a test tweet?</p></div>
					<fieldset class="page">
						<legend style="font-weight:bold;"><img src="images/icons/twitter.png"alt=""style="vertical-align:middle;width:16px;"/> Twitter</legend>
						<div style="margin-top:10px;">
							<div style="width:50%;float:left;" class="lngSettingsTwitterSendTestTweet">Send test tweet:</div><div style="width:49%;float:left;"><input id="boolTwitterTestTweet"type="checkbox"/></div>
						</div>
					</fieldset>
				</div>
				<div id="page_finish"style="display:none;">
					<div style="height:75px;"><p>The setup is ready, now shrimp7 tries to contact the selected services. You can always re-run the setup to change settings. Thank you for using shrimp7!</p></div>
					<fieldset class="page">
						<legend style="font-weight:bold;"><img src="images/icons/earth.gif"alt=""style="width:16px;vertical-align:middle;"/> Connecting with the world</legend>
						<div id="facebookConnect"style="display:none;margin-top:10px;">
							<div id="facebookConnecting"><img src="images/icons/facebook.png"alt=""style="vertical-align:middle;width:16px;"/> Trying to connect with Facebook<img src="images/icons/loading_dots.gif"alt=""/></div>
							<div id="facebookConnectingProblem"style="display:none;"><img src="images/icons/facebook.png"alt=""style="vertical-align:middle;width:16px;"/> Problem while connecting with Facebook! <a href="javascript:System.Gadget.document.parentWindow.changeFlyout('shrimp7help.htm');">Click here for help</a></div>
							<div id="facebookConnected"style="display:none;"><img src="images/icons/facebook.png"alt=""style="vertical-align:middle;width:16px;"/> Succesfully connected with Facebook, <a href="javascript:shrimp7.settings.close({openTab:'facebook'});">click here to view youFacebook!</a></div>
						</div>
						<div id="twitterConnect"style="display:none;margin-top:10px;">
							<div id="twitterConnecting"><img src="images/icons/twitter.png"alt=""style="vertical-align:middle;width:16px;"/> Trying to connect with Twitter<img src="images/icons/loading_dots.gif"alt=""/></div>
							<div id="twitterConnectingProblem"style="display:none;"><img src="images/icons/twitter.png"alt=""style="vertical-align:middle;width:16px;"/> Problem while connecting with Twitter!</div>
							<div id="twitterConnected"style="display:none;"><img src="images/icons/twitter.png"alt=""style="vertical-align:middle;width:16px;"/> Succesfully connected with Twitter, <a href="javascript:shrimp7.settings.close({openTab:'twitter'});">click here to view youTwitter!</a></div>
						</div>
						<div id="friendfeedConnect"style="display:none;margin-top:10px;">
							<div id="friendfeedConnecting"><img src="images/icons/friendfeed.png"alt=""style="vertical-align:middle;width:16px;"/> Trying to connect with Friendfeed<img src="images/icons/loading_dots.gif"alt=""/></div>
							<div id="friendfeedConnectingProblem"style="display:none;"><img src="images/icons/friendfeed.png"alt=""style="vertical-align:middle;width:16px;"/> Problem while connecting with Friendfeed!</div>
							<div id="friendfeedConnected"style="display:none;"><img src="images/icons/friendfeed.png"alt=""style="vertical-align:middle;width:16px;"/> Succesfully connected with Friendfeed, <a href="javascript:shrimp7.tabState('friendfeed');">click here to view youFriendfeed!</a></div>
						</div>
					</fieldset>
				</div>
				<div style="clear:both;"></div>
				<div id="settingsButtons">
					<input type="button"id="setupCancelButton"class="lngMainPrevious"onclick=""value="Back"/>
					<input type="button"id="setupNextButton"class="lngMainNext"onclick=""value="Next"/>
				</div>
			</div>
		</div>
		
		<!--
		Status
		//-->
		
		<div id="statusUpdate"style="display:none;">
			<div id="statusEditBlock">
				<div id="statusEditForm" style="text-align:center;margin-top:10px;">
						<textarea id="statusTextarea" style="width:270px;height:120px;filter:alpha(opacity=80);"></textarea>
				</div>
				<div style="margin-top:10px;"><b>Post options:</b> <span id="postWarning"style="color:#ff0000;"></span></div>
				<div style="width:100%;margin-top:10px;">
					<div style="width:170px;float:left;">
						<div id="postToTwitter">
							<div style="width:50%;float:left;">
								<img src="images/icons/twitter.png"alt=""style="width:16px;vertical-align:middle"/> Twitter
							</div>
							<div style="width:49%;float:left;">
								 <input type="checkbox"id="twitterCheckbox"/> <span id="postStatusTwitter"></span>
							</div>
						</div> 
						<div id="postToFacebook">
							<div style="width:50%;float:left;">
								<img src="images/icons/facebook.png"alt=""style="width:16px;vertical-align:middle"/> Facebook
							</div>
							<div style="width:49%;float:left;">
								 <input type="checkbox"id="facebookCheckbox"/> <span id="postStatusFacebook"></span>
							</div>
						</div> 
						<div id="postToFriendfeed">
							<div style="width:50%;float:left;">
								<img src="images/icons/friendfeed.png"alt=""style="width:16px;vertical-align:middle"/> Friendfeed
							</div>
							<div style="width:49%;float:left;">
								 <input type="checkbox"id="friendfeedCheckbox"/> <span id="postStatusFriendfeed"></span>
							</div>
						</div>
					</div>
					<div style="width:100px;float:left;text-align:right;">
						<input type="button"onclick="shrimp7.statusUpdate.setStatus()"id="setStatus"value="Post"style="width:100px;height:42px;font-size:18px;font-weight:bold;filter:alpha(opacity=60);cursor:pointer;"/>
					</div>
					<div style="clear:both;"></div>
				</div>
				<fieldset>
				<legend>When</legend>
				<div style="width:100%;"><div style="width:20%;float:left;">Now</div><div style="width:79%;float:left;"><input type="radio"name="when"checked="checked"value="now"/></div></div>
				<div style="width:100%;"><div style="width:20%;float:left;">Later:</div><div style="width:79%;float:left;"><input type="radio"name="when"value="later"/><img src="images/icons/calendar.png"/><input type="text"id="datepicker"size="9"/> <input type="hidden"id="behind"size="9"/><img src="images/icons/clock.png"style="width:16px;"/><input type="text"id="timepicker"maxlength="5"size="9"value=""/><br/><span style="font-size:smaller;">NOTICE: When you close shrimp7, the queued messages will be deleted!</span></div></div>
				</fieldset>
			</div>
		</div>
		
		<!--
		Facebook comments
		//-->
		
		<div id="facebookComments"style="display:none;">
			<div id="commentsBlock"></div>
			<a id="facebookCommentsPagingPrevious"href="">Previous</a> <a id="facebookCommentsPagingNext"href="">Next</a>
			<div style="margin-top:5px;"><h2>Post your comment</h2></div>
			<div id="commentPostBlock">
				<div id="commentPostForm"style="text-align:center;margin-top:10px;">
						<textarea id="commentPost"style="width:250px;height:140px;filter:alpha(opacity=70)"></textarea>
				</div>
				<p style="text-align:center;"><input type="button"id="postCommentSubmit"onclick="shrimp7.facebook.comments.post()"name="post"value="Post"/> <input type="button"onclick="hideFlyout()"name="close"value="Cancel"/></p>
			</div>
		</div>
		
		<!--
		Facebook friends
		//-->
		
		<div id="facebookFriends"style="display:none;">
			<div id="friendsContainer"style="margin-top:10px;width:100%;text-align:center;">
				<div id="friends">
					<div id="friendsLoading"style="width:100%;text-align:center;"><img src="images/icons/loading.gif"alt="Loading"title="Loading.."/></div>
				</div>
				<div id="friendsPaging">
					<input type="button"id="facebookFriendsPagingPrevious"onclick=""value="Previous"style="display:none;width:120px;height:30px;font-size:18px;font-weight:bold;filter:alpha(opacity=60);cursor:pointer;"/>
					<input type="button"id="facebookFriendsPagingNext"onclick=""value="Next"style="display:none;width:120px;height:30px;font-size:18px;font-weight:bold;filter:alpha(opacity=60);cursor:pointer;"/>
				</div>
			</div>
			<div id="friendDetail"style="width:100%;margin-top:10px;display:none;">
				<div style="width:100px;float:left;border-width:0px;border-color:#000;border-style:solid;">
					<div id="friendName"></div>
					<div id="friendCity"></div>
					<div id="friendBirthday"></div>
				</div>
				<div id="friendPicture" style="width:70px;float:right;text-align:right;"></div>
				<div style="clear:both;"></div>
				<div id="friendWriteOnWall">
					<textarea id="friendWriteOnWallTextfield"style="width:250px;"></textarea>
					<input type="button"onclick=""id="friendWriteOnWallPost"value="Post"/>
				</div>
				<div id="facebookFriendStreamBlock">
					<div style="width:100%;text-align:center;"><img src="images/icons/loading.gif" alt=""/></div>
				</div>
			</div>
		</div>
		
		<!--
		Twitter followers
		//-->
		
		<div id="twitterFollowers"style="display:none;">
			<div id="followersBox"style="margin-top:20px;text-align:center;">
				<div id="followers"><div style="width:100%;text-align:center;"><img src="images/icons/loading.gif"alt="Loading"title="Loading.."/></div></div>
				<div id="followersPaging">
					<input type="button"id="followersPagingPrevious"onclick=""value="Previous"style="display:none;width:120px;height:30px;font-size:18px;font-weight:bold;filter:alpha(opacity=60);cursor:pointer;"/>
					<input type="button"id="followersPagingNext"onclick=""value="Next"style="display:none;width:120px;height:30px;font-size:18px;font-weight:bold;filter:alpha(opacity=60);cursor:pointer;"/>
				</div>
			</div>
			<div id="followerInfo"style="display:none;width:100%;margin-top:10px;">
				<div style="width:100%;">
				<div id="followerInfoImage"style="float:right;"></div>
					<div style="width:100%;"><div style="width:39%;float:left;">Location:</div><div id="followerInfoLocation"style="width:60%;float:left;"></div></div>
					<div style="width:100%;"><div style="width:39%;float:left;">Followers:</div><div id="followerInfoFollowers"style="width:60%;float:left;"></div></div>
					<div id="twitterFollowerDetailDescription"style="width:100%;"><div style="width:100%;float:left;">Description:</div></div>
				</div>
				<div id="followerInfoDescription"style="width:100%;float:left;"></div>
				
				<div>
					<div style="clear:both;width:100%;margin:10px 0px 10px 0px;"><h2>Latest tweet:</h2></div>
					<div id="followerInfoStatus"class="tweet"></div>
				</div>
				
				<div>
					<div id="followerDirectTweetFormStatus"></div>
					<div><h2>Tweet</h2></div>
					<div id="followerDirectTweetLoading"style="display:none;width:100%;text-align:center;"><img src="images/icons/loading.gif"alt="" /></div>
					<div>normal <input type="radio"class="tweetType"name="tweetType"value="normal"checked="checked"/> direct <input type="radio"class="tweetType"name="tweetType"value="direct"/></div>
					<div id="followerDirectTweetForm">
						<textarea id="tweetTextarea"style="width:100%;height:100px;"></textarea>
						<div style="width:100%;">
							<div style="width:30%;float:left;margin-top:15px;text-align:center;"><span id="span-characters">140</span></div>
							<div style="width:60%;float:right;"><input type="button"id="followerTweetPost"onclick=""value="Tweet!"style="width:150px;height:50px;font-size:18px;font-weight:bold;filter:alpha(opacity=60);cursor:pointer;"/></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<!--
		Twitter rate management
		//-->
		
		<div id="twitterRateManagement"style="display:none;">
			<div style="margin-top:10px;width:100%;">
				<p>Twitter has a rate limit each hour. The rate limit is 150 querie's each hour and is active on refresh feeds like timeline, direct messages and more. This tool helps you to set intervals for refreshing Twitter.</p>
				<p>Refresh following timeline <span id="twitterRefreshTimelineValue">60</span> times each hour:</p>
				<div style="width:100%;margin-top:10px;">
					<div style="margin:0px 10px 0px 10px;"><div id="twitterRefreshTimeline"></div></div>
				</div>
				<p>Refresh replies <span id="twitterRefreshRepliesValue">60</span> times each hour:</p>
				<div style="width:100%;margin-top:10px;">
					<div style="margin:0px 10px 0px 10px;"><div id="twitterRefreshReplies"></div></div>
				</div>
				<p>Refresh direct messages <span id="twitterRefreshDirectMessagesValue">60</span> times each hour:</p>
				<div style="width:100%;margin-top:10px;">
					<div style="margin:0px 10px 0px 10px;"><div id="twitterRefreshDirectMessages"></div></div>
				</div>
				
				<div style="margin-top:20px;">Queurie's each hour: <span id="total"></span>*</div>
				<p style="font-size:smaller;">* The totals shown here are including refreshes for: your info, followers, direct messages, saved searches, spy refreshes.</p>
			</div>
		</div>
		
		<!--
		About
		//-->
		
		<div id="about"style="display:none;">
			<p>shrimp7 brings you several features to stay connected with your Facebook friends.</p>
			<p>If you got any questions, problems you can go to the <a href="http://www.facebook.com/apps/application.php?id=103178211049">shrimp7 page on Facebook</a>, you can also <a href="http://www.facebook.com/soepgarnaal">add the developer of this gadget to your friends list</a>, most of the times I'm friendly.. so don't be rude ;) My twitter name is: <a href="http://twitter.com/soupshrimp">soupshrimp</a>.</p>
			<div id="specialthanx">
				<p><strong>Special thanx</strong></p>
				Ofcourse, this program cannot exist without Facebook, Twitter, Friendfeed and more important you! But i also has to thank several people in special:
				<p style="text-align:center;">
					?? (China)<br/>
					Marc van Deursen (Netherlands)<br/>
					Doortje-D (Netherlands)<br/>
					John Resig (JQuery)<br/>
					Douglas Crockford (JSLint)<br/>
					Julien Lecomte (YUI compressor)<br/>
					Kermit the naked frog<br/>
				</p>
				<p style="text-align:center;"><a href="http://gallery.live.com/liveItemDetail.aspx?li=2266d15e-2313-497a-b21b-deeee3bdee2c" title="Make a review on this gadget">Review this gadget @live.com, i will appreciate!</a></p>
				<p style="text-align:center;">
					<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=7950248">Support us, donate via PayPal!</a>
				</p>
			</div>
		</div>
		
		<!--
		Twitter search
		//-->
		
		<div id="twitterSearch"style="display:none;">
			<div id="searchForm" style="margin-top:10px;text-align:center;">
				<input type="text"id="searchField"size="18"value=""/> <input type="button"id="searchSubmit"onclick="searchSubmit();"value="Search"/>
			</div>
			<div id="searchResultsContainer"style="display:none;margin-top:10px;width:100%;">
				<div id="saveSearchQuery"style="display:none;width:100%;text-align:right;"><a href="javascript:saveSearch();">Save this search</a></div>
				<div id="searchResults">
					<div style="width:100%;text-align:center;"><img src="images/icons/loading.gif"/></div>
				</div>
			</div>
			<div style="width:100%;text-align:right;">
				<input type="button"id="searchPagingPrevious"class="langGadgetPrevious"onclick=""value="Back"style="display:none;width:100px;height:50px;font-size:18px;font-weight:bold;filter:alpha(opacity=60);cursor:pointer;"/> 
				<input type="button"id="searchPagingNext"class="langGadgetNext"onclick=""value="Next"style="display:none;width:100px;height:50px;font-size:18px;font-weight:bold;filter:alpha(opacity=60);cursor:pointer;"/>
			</div>
		</div>
		
	</div>
</div>

</body>
<script type="text/javascript">
	
	function twitterTab(tab){
		shrimp7.twitter.activeTab = tab;
		$("#searchContainer,#spyContainer,#twitterPagination,#twitterContent").hide();
		switch(tab){
			case 'timeline':
				$("#twitterPagination,#twitterContent").show();
				shrimp7.twitter.refreshTimelineData({
					totalPerPage:	15,
					dropIn:			'twitterContent',
					dom:			'document',
					data:			shrimp7.twitter.streamData,
					pagingPrefix:	'.twitterPaging'
				});
				break;
			case 'replies':
				$("#twitterPagination,#twitterContent").show();
				shrimp7.twitter.refreshTimelineData({
					totalPerPage:	15,
					dropIn:			'twitterContent',
					dom:			'document',
					data:			shrimp7.twitter.repliesData,
					pagingPrefix:	'.twitterPaging'
				});
				break;
			case 'search':
				$("#searchContainer").show();
				break;
			case 'spy':
				$("#spyContainer").show();
				shrimp7.twitter.spyUserList({
					dropIn:		'#spyUserList'
				});
				break;
		}
	}
	
	function facebookTab(tab){
		switch(tab){
			case 'timeline':
				shrimp7.facebook.createWallStreamHTML({
					startId:		0,
					dropIn:			'#facebookContent',
					data:			shrimp7.facebook.streamRoot.wall,
					pagingPrefix:	'.facebookPaging'
				});
			break;
			case 'wall':
				shrimp7.facebook.createWallStreamHTML({
					startId:		0,
					dropIn:			'#facebookContent',
					data:			shrimp7.facebook.streamRoot.status,
					pagingPrefix:	'.facebookPaging'
				});
			break;
		}
	}
	
</script>
</html>